<layout name="master"/>
<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#">基本设置</a></li>
    <li><a href="#">公众号配置</a></li>
</ul>
<div class="m-b-md">
    <h3 class="m-b-none">微信按钮</h3>
</div>
<div class="row">
    <div class="col-sm-12">
        <section class="panel panel-default">
            <header class="panel-heading font-bold">修改配置</header>
            <div class="panel-body">
                <style>
                    .mobile {
                        border  : solid 1px #999999;
                        height  : 500px;
                        display : flex;
                    }

                    .mobile dl {
                        margin         : 0px;
                        padding        : 0px;
                        display        : flex;
                        flex           : 1;
                        flex-direction : column-reverse;
                    }

                    .mobile dl dt {
                        background  : #999999;
                        color       : #ffffff;
                        height      : 30px;
                        text-align  : center;
                        border      : solid 1px #f3f3f3;
                        cursor      : pointer;
                        line-height : 2em;
                    }

                    .mobile dl dd {
                        display        : flex;
                        flex-direction : column;
                    }

                    .mobile dl dd a {
                        border          : solid 1px #f3f3f3;
                        text-align      : center;
                        padding         : 6px;
                        text-decoration : none;
                    }

                    .top-menu, .sub-menu {
                        position : relative;
                    }

                    .top-menu .top-fa, .sub-menu .sub-fa {
                        position : absolute;
                        right    : -10px;
                        top      : -10px;
                        color    : #999999;
                        cursor   : pointer;
                        display  : none;
                    }

                    .top-menu:hover .top-fa, .sub-menu:hover .sub-fa {
                        display : block;
                    }
                </style>
                <div>
                    <form action="" method="post" class="form-horizontal" role="form">
                        <div class="container">
                            <div class="row">
                                <div class="col-xs-4" class="app">
                                    <div class="mobile">
                                        <dl ng-repeat="v in data.button">
                                            <dt ng-bind="v.name"></dt>
                                            <dd>
                                                <a href="" ng-repeat="d in v.sub_button" ng-bind="d.name"></a>
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                                <div class="col-xs-8">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">编辑</h3>
                                        </div>
                                        <div class="panel-body">
                                            <!--一级菜单开始-->
                                            <div class="panel panel-default top-menu" ng-repeat="v in data.button">
                                                <i class="fa fa-times-circle top-fa fa-lg" ng-click="removeTopMenu(v)"></i>
                                                <div class="panel-body">
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">标题</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control" ng-model="v.name">
                                                        </div>
                                                    </div>
                                                    <div class="form-group" ng-hide="v.sub_button">
                                                        <label class="col-sm-2 control-label">类型</label>
                                                        <div class="col-sm-10">
                                                            <label class="radio-inline">
                                                                <input type="radio" ng-model="v.type" value="click"> 关键词
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" ng-model="v.type" value="view"> 网址
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group" ng-if="v.type=='click' && !v.sub_button">
                                                        <label class="col-sm-2 control-label">关键词</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control" ng-model="v.key">
                                                        </div>
                                                    </div>
                                                    <div class="form-group" ng-if="v.type=='view' && !v.sub_button">
                                                        <label class="col-sm-2 control-label">链接</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control" ng-model="v.url">
                                                        </div>
                                                    </div>
                                                    <!--二级菜单-->
                                                    <div class="panel panel-default sub-menu" ng-repeat="d in v.sub_button">
                                                        <i class="fa fa-times-circle sub-fa fa-lg" ng-click="removeSubMenu(v,d)"></i>
                                                        <div class="panel-body">
                                                            <div class="form-group">
                                                                <label class="col-sm-2 control-label">标题</label>
                                                                <div class="col-sm-10">
                                                                    <input type="text" class="form-control" ng-model="d.name">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-sm-2 control-label">类型</label>
                                                                <div class="col-sm-10">
                                                                    <label class="radio-inline">
                                                                        <input type="radio" ng-model="d.type" value="click"> 关键词
                                                                    </label>
                                                                    <label class="radio-inline">
                                                                        <input type="radio" ng-model="d.type" value="view"> 网址
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="form-group" ng-if="d.type=='click'">
                                                                <label class="col-sm-2 control-label">关键词</label>
                                                                <div class="col-sm-10">
                                                                    <input type="text" class="form-control" ng-model="d.key">
                                                                </div>
                                                            </div>
                                                            <div class="form-group" ng-if="d.type=='view'">
                                                                <label class="col-sm-2 control-label">链接</label>
                                                                <div class="col-sm-10">
                                                                    <input type="text" class="form-control" ng-model="d.url">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--二级菜单 end-->
                                                    <button type="button" class="btn btn-info" ng-click="addSubButton(v)">添加菜单</button>
                                                </div>
                                            </div>
                                            <!--一级菜单结束-->
                                            <button type="button" class="btn btn-success" ng-click="addTopButton()">添加一级菜单</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="text" hidden="hidden" name="data" value="{{data}}">
                        <button class="btn btn-primary">保存</button>
                    </form>
                </div>
            </div>
        </section>
    </div>
</div>
<script>
    function controller($scope,util,_) {
            $scope.data = {
                "button": [
                    {
                        "type": "click",
                        "name": "今日歌曲",
                        "key": "V1001_TODAY_MUSIC"
                    },
                    {
                        "type": "view",
                        "name": "后盾人",
                        "url": "http://www.houdunren.com",
                        "sub_button": [
                            {
                                "type": "view",
                                "name": "PHP",
                                "url": "http://www.houdunren.com/"
                            },
                            {
                                "type": "view",
                                "name": "HTML5",
                                "url": "http://www.houdunren.com/"
                            }
                        ]
                    }
                ]
            }
            //删除一级菜单
            $scope.removeTopMenu = function (item) {
                $scope.data.button = _.without($scope.data.button, item);
            }
            //删除二级菜单
            $scope.removeSubMenu = function (topMenu, subMenu) {
                topMenu.sub_button = _.without(topMenu.sub_button, subMenu);
            }
            //添加一级菜单
            $scope.addTopButton = function () {
                var menu = {
                    "type": "view",
                    "name": "",
                    "key": ""
                };
                if ($scope.data.button.length == 3) {
                    alert('一级菜单最多为三个');
                } else {
                    $scope.data.button.push(menu);
                }
            }
            //添加二级菜单   houdunren.com
            $scope.addSubButton = function (item) {
                var menu = {
                    "type": "view",
                    "name": "",
                    "key": ""
                };
                if (!item.sub_button) {
                    item.sub_button = [];
                }
                if (item.sub_button.length == 5) {
                    alert('二级菜单最多为五个');
                } else {
                    item.sub_button.push(menu);
                }
            }
        };
</script>